<?php

require dirname(__DIR__) . "/vendor/autoload.php";

use Kmin\Template;
// 实例化模板引擎
$tpl = new Template([
    "view_path" => __DIR__ . "/../component/",
    "cache_path" => __DIR__ . "/../runtime/",
]);
?>

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="module" src="../vendor/kmin/template/src/assets/kmin.js"></script>
    <link rel="stylesheet" href="../component/kmin-ui.css">
</head>

<body>
    <div style="margin: 10px;">
        <menu-demo></menu-demo>
    </div>
    <script type="module">
        // 内容
        <?php echo $tpl->fetch("menu"); ?>

        customElements.define('menu-demo', class extends KMin {
            constructor() {
                super();

                this.event = new Event(this);

                this.data = this.reactive({ // 默认数据
                    items: [{
                            text: '选项1',
                            value: '1',
                        },
                        {
                            text: '选项2',
                            value: '2'
                        },
                        {
                            text: '选项3',
                            value: '3',
                            child: [{
                                    text: '选项3-1',
                                    value: '3-1'
                                },
                                {
                                    text: '选项3-2',
                                    value: '3-2'
                                },
                                {
                                    text: '选项3-3',
                                    value: '3-3',
                                    child: [{
                                        text: '选项3-3-1',
                                        value: '3-3-1'
                                    }]
                                },
                            ]
                        },
                    ]
                });
            }

            render() {
                return `
                    <km-menu id='menu1' options='${this.kmJson(this.data.items)}'></km-menu>
                    <br>
                    <km-menu id='menu2' options='${this.kmJson(this.data.items)}' type='vertical' demo="true"></km-menu>
                `
            }

            // 父组件挂载时监听子组件事件
            connectedCallback() {
                super.connectedCallback(); // 调用父类方法确保更新

                // 注册子组件
                this.event.register('menu', "#menu1")
                // 监听子组件事件
                this.event.on('menu', 'select', (data) => {
                    this.handleSelectMenu(data.detail);
                });
                // 注册子组件
                this.event.register('menu', "#menu2")
                // 监听子组件事件
                this.event.on('menu', 'select', (data) => {
                    this.handleSelectMenu(data.detail);
                });
            }

            // 处理子组件事件
            handleSelectMenu(data) {
                console.log('子组件触发事件:', data);
            }
        })
    </script>
</body>

</html>